import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import { resolve } from "path";
import postcsspxtoviewport from "postcss-px-to-viewport";
import tailwindcss from "tailwindcss";

function pathResolve(dir) {
  return resolve(process.cwd(), ".", dir);
}

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  return {
    base: "./", // 设置基础路径为根目录
    build: {
      outDir: "./dist", // 指定输出目录为 "./dist"
      assetsDir: "./assets", // 指定静态文件引入路径为 "./assets"
      sourcemap: false, // 不生成 sourceMap 文件
      // minify: "terser", // 使用 terser 进行代码压缩
      chunkSizeWarningLimit: 2000, // 设置 chunk 大小警告的限制为 2000 KiB
      chunkSizeLimit: 5000, // 设置 chunk 大小的限制为 5000 KiB
      emptyOutDir: true, // 在构建之前清空输出目录
      rollupOptions: {
        output: {
          // 在这里修改静态资源路径
          chunkFileNames: "assets/js/[name]-[hash].js",
          entryFileNames: "assets/js/[name]-[hash].js",
          assetFileNames: "assets/[ext]/[name]-[hash].[ext]",
          manualChunks(id) {
            // Vue 及其相关库的 chunk
            if (
              id.includes("vue") ||
              id.includes("core-js") ||
              id.includes("@babel/runtime")
            ) {
              return "vendor";
            }
            // 其他库的 chunk
            if (id.includes("node_modules")) {
              return "dependencies";
            }
            // 默认情况下将模块放入一个单独的 chunk
            return "common";
          },
        },
      },
    },
    plugins: [
      vue(),
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
    css: {
      postcss: {
        plugins: [
          postcsspxtoviewport({
            unitToConvert: "px", // 要转换的单位
            viewportWidth: 1920, // 设计稿宽度
            unitPrecision: 5, // 单位转换后保留的精度
            propList: ["*"], // 指定转换那些属性，* 表示全部
            viewportUnit: "rem", // 希望使用的视口单位
            fontViewportUnit: "rem", // 字体使用的视口单位
            landscapeUnit: "rem", // 横屏时使用的单位
            landscapeWidth: 667, // 横屏时使用的视口宽度
            // landscape: false, // 是否处理横屏情况
            selectorBlackList: [], // 要忽略的选择器
            minPixelValue: 1, // 最小的转换数值
            mediaQuery: false, // 是否在媒体查询中也转换
            replace: true, // 是否直接更换原来的单位
            exclude: /(\/|\\)(node_modules)(\/|\\)/, // 忽略某些文件
          }),
          tailwindcss,
        ],
      },
    },
    resolve: {
      // alias: {
      //   '@': resolve(__dirname, 'src')
      // }
      alias: [
        // {
        //   find: 'vue-i18n',
        //   replacement: 'vue-i18n/dist/vue-i18n.cjs.js',
        // },
        // /@/xxxx => src/xxxx
        // {
        //   find: /\/@\//,
        //   replacement: pathResolve("src") + "/",
        // },
      ],
    },
    server: {
      host: "localhost", // 启动后浏览器窗口输入地址就可以进行访问
      // port: 9090, // 端口号
      open: true, //是否自动打开浏览器
      cors: true, //为开发服务器配置 CORS , 默认启用并允许任何源
      https: false, //是否支持http2 如果配置成true 会打开https://localhost:8080;
      strictPort: true, //严格的端口号，如果true，端口号被占用时会直接退出
      hmr: true, // 开启热更新
      proxy: {
        // 反向代理配置
        "/api": {
          // 配置接口调用目标地址
          target: "https://www.xxxx.com",
          // 当进行代理时，在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
          changeOrigin: true,
          // 替换target中的请求地址，请求时以 /api 开头
          rewrite: (path) => path.replace(/^\/api/, ""),
        },
      },
    },
  };
});
